<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.number" size="small" style="width:140px;" placeholder="加工单号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.export_order_number" size="small" style="width:140px;" placeholder="运营订单号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.type_no" size="small" style="width:140px;" placeholder="款号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.approval_state" placeholder="状态" style="width: 100px;" size="small" clearable>
                        <el-option label="未审核" :value="0"></el-option>
                        <el-option label="已审核" :value="1"></el-option>
                        <el-option label="审核取消" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom" width="400" trigger="click">
                        <el-form label-width="70px" label-position="left">
                            <el-form-item label="工厂名称">
                                <el-select v-model="form.supplier" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                                           :remote-method="searchFactoryBtn" :loading="searchLoading" clearable>
                                    <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="款名">
                                <el-input v-model.trim="form.type_name" size="small" style="" placeholder="款名" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="大货核价">
                                <el-input v-model.trim="form.verify_price_number" size="small" style="" placeholder="大货核价编码" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="创建人">
                                <el-input v-model.trim="form.creator" size="small" style="width:100%;" placeholder="创建人" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="合同交期">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="form.delivery_date" type="daterange" size="small" style="width: 100%"
                                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-form>
                        <el-badge :is-dot="(!!form.supplier || !!form.type_name || !!form.verify_price_number || !!form.creator || !!form.delivery_date)" slot="reference" class="more-btn">
                            <el-button size="small" type="warning" plain>更多</el-button>
                        </el-badge>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" size="small" @click="addBtn" :disabled="!nodeActions.includes('add')">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini" :summary-method="getSummaries" show-summary
                      row-key="id" highlight-current-row>
                <el-table-column prop="approval_state" label="状态" width="70" fixed>
                    <template slot-scope="{row}">
                        <el-tag size="mini" type="info" v-if="row.approval_state==0">未审核</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.approval_state==1">已审核</el-tag>
                        <el-tag size="mini" type="warning" v-else-if="row.approval_state==2">审核取消</el-tag>
                        <span v-else>{{row.approval_state}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="加工单号" width="105" fixed>
                    <template slot-scope="{row}">
                        <el-button type="text" style="color: #909399" size="small" class="el-icon-document-copy copy-number"
                                   @click="copyBtn('.copy-number', row.number)"></el-button>
                        <a @click="linkTo(row.number, 'produce_processing')" style="color: #409eff">
                            {{row.number}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column label="运营订单号" width="100" fixed>
                    <template slot-scope="{row}">
                        {{row.item.export_order_number}}
                    </template>
                </el-table-column>
                <el-table-column label="图片" width="50" fixed>
                <template slot-scope="{row}">
                    <el-image v-if="row.item.img" :src="row.item.img" :preview-src-list="[row.item.img]" style="height: 30px;" fit="contain"></el-image>
                </template>
            </el-table-column>
                <el-table-column prop="type_no" label="款号" width="110" fixed>
                    <template slot-scope="{row}">
                        <el-button type="text" style="color: #909399" size="small" class="el-icon-document-copy copy-type-no"
                                   @click="copyBtn('.copy-type-no', row.item.product_number)"></el-button>
                        <a @click="linkTo(row.item.product_number, 'pages_designEd')" style="color: #409eff">
                            {{row.item.product_number}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="customer_purchase_order_date" label="客人下单日期" width="100"></el-table-column>
                <el-table-column prop="contract_number" label="工厂合同号" width="100" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <el-button type="text" style="color: #909399" size="small" class="el-icon-document-copy copy-contract-number"
                                   @click="copyBtn('.copy-contract-number', row.contract_number)"></el-button>
                        {{row.contract_number}}
                    </template>
                </el-table-column>
                <el-table-column prop="supplier" label="供应商" width="130" show-overflow-tooltip></el-table-column>
                <el-table-column prop="count" label="件数" width="70"></el-table-column>
                <el-table-column prop="price" label="总价" width="85"></el-table-column>
                <el-table-column prop="verify_price_number" label="大货核价编码" width="110">
                    <template slot-scope="{row}" v-if="row.verify_price_number">
                        <el-button type="text" style="color: #909399" size="small" class="el-icon-document-copy copy-verify-price-number"
                                   @click="copyBtn('.copy-verify-price-number', row.verify_price_number)"></el-button>
                        <a @click="linkTo(row.verify_price_number, 'soa_pricing_verify')" style="color: #409eff">
                            {{row.verify_price_number}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="verify_price_price" label="大货核价" width="80"></el-table-column>
                <el-table-column prop="f8_price" label="绣花单价" width="80"></el-table-column>
                <el-table-column prop="delivery_date" label="合同交期" width="90"></el-table-column>
                <el-table-column prop="handler" label="跟单员" width="80"></el-table-column>
                <el-table-column prop="f18" label="理单员" width="80"></el-table-column>
                <el-table-column prop="f8_short" label="绣花厂" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column prop="f9_short" label="印花长" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column prop="f10_short" label="烫金厂" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column prop="f11_short" label="印金厂" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column prop="creator" label="创建人" width="80"></el-table-column>
                <el-table-column prop="creation_time" label="创建时间" width="90"></el-table-column>
                <el-table-column label="操作" fixed="right" width="140">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small" class="el-icon-folder-opened" @click="openBtn(row)">
                            打开
                        </el-button>
                        &nbsp;
                        <el-dropdown trigger="hover" style="font-size: 12px;" @command="actionBtn($event, row)">
                            <span style="cursor: pointer;color: #409EFF;">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="CHECK" icon="el-icon-document-checked" :disabled="!(nodeActions.includes('check') && [0,2].includes(row.approval_state))">审 核</el-dropdown-item>
                                <el-dropdown-item command="UNCHECK" icon="el-icon-document-delete" :disabled="!(nodeActions.includes('check') && row.approval_state==1)">反审核</el-dropdown-item>
                                <el-dropdown-item command="DEL" icon="el-icon-delete" :disabled="!(nodeActions.includes('del')&&row.approval_state==0)">删 除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page style="float: right" :total="total" :current="page" :page-size="limit" show-sizer :page-size-opts="[20, 50, 100, 500]" show-total @on-change="pageChange"
                      @on-page-size-change="pageSizeChange"></Page>
            </div>
        </el-col>

        <!--新增、编辑-->
        <el-drawer :title="editTitle" :visible.sync="editVisible" size="1200px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row>
                <div style="margin-bottom: 10px;padding-left: 10px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">成品加工单编码：{{editForm.number}}</span>
                    <el-tag size="mini" v-if="editForm.approval_state==0" type="info" style="vertical-align: super;margin-left: 10px;">未审核</el-tag>
                    <el-tag size="mini" v-else-if="editForm.approval_state==1" type="success" style="vertical-align: super;margin-left: 10px;">已审核</el-tag>
                    <el-tag size="mini" v-else-if="editForm.approval_state==2" type="warning" style="vertical-align: super;margin-left: 10px;">审核取消</el-tag>
                </div>
                <el-form inline label-position="right" label-width="108px">
                    <el-form-item label="工厂合同号：" class="edit-item-form">
                        <el-input v-model="editForm.contract_number" size="small" style="width: 180px;" placeholder="合同号（自动生成）"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商：" class="edit-item-form">
                        <el-select v-model="editForm.supplier" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 180px;"
                                   :remote-method="searchFactoryBtn" @change="factoryChangeBtn($event, 'supplier')" :loading="searchLoading" :disabled="!isEdit" clearable>
                            <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商简称：">
                        <div style="width: 180px;" class="ellipsis">{{editForm.supplier_short}}</div>
                    </el-form-item>
                    <el-form-item label="合同交期：" class="edit-item-form">
                        <el-date-picker v-model="editForm.delivery_date" type="date" placeholder="选择日期" size="small" :disabled="!isEdit" style="width: 180px;"
                                        value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="大货编码：" class="edit-item-form">
                        <el-input placeholder="大货核价编码" v-model="editForm.verify_price_number" size="small" style="width: 180px;vertical-align: unset;" readonly>
                            <el-button slot="append" icon="el-icon-search" :disabled="!(isEdit && editItem.length>0)" @click="openVerifyBtn"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="大货核价：">
                        <el-input size="small" type="number" style="width: 180px" v-model="editForm.verify_price_price" placeholder="0.00" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="大货款号：">
                        <div style="width: 180px;">{{editForm.verify_price_style_number}}</div>
                    </el-form-item>
                    <el-form-item label="绣花单价：">
                        <el-input size="small" type="number" style="width: 180px" v-model="editForm.f8_price" placeholder="0.00" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="理单员：" class="edit-item-form">
                        <el-select v-model="editForm.f18" filterable remote placeholder="输入搜索理单员" size="small" style="width: 180px;"
                                   :remote-method="searchUserBtn" :loading="searchLoading" :disabled="!isEdit" clearable>
                            <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="跟单员：">
                        <el-select v-model="editForm.handler" filterable remote placeholder="输入搜索跟单员" size="small" style="width: 180px;"
                                   :remote-method="searchUserBtn" :loading="searchLoading" :disabled="!isEdit" clearable>
                            <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="绣花厂：">
                        <el-select v-model="editForm.f8_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 180px;"
                                   :remote-method="searchFactoryBtn" :loading="searchLoading" @change="factoryChangeBtn($event, 'f8')" :disabled="!isEdit" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==2" :label="item.factory_name_jiancheng"
                                       :value="item.factory_name_jiancheng" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="印花厂：">
                        <el-select v-model="editForm.f9_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 180px;"
                                   :remote-method="searchFactoryBtn" :loading="searchLoading" @change="factoryChangeBtn($event, 'f9')" :disabled="!isEdit" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==6" :label="item.factory_name_jiancheng"
                                       :value="item.factory_name_jiancheng" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="烫金厂：">
                        <el-select v-model="editForm.f10_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 180px;"
                                   :remote-method="searchFactoryBtn" :loading="searchLoading" @change="factoryChangeBtn($event, 'f10')" :disabled="!isEdit" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==5" :label="item.factory_name_jiancheng"
                                       :value="item.factory_name_jiancheng" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="印金厂：">
                        <el-select v-model="editForm.f11_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 180px;"
                                   :remote-method="searchFactoryBtn" :loading="searchLoading" @change="factoryChangeBtn($event, 'f11')" :disabled="!isEdit" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==1" :label="item.factory_name_jiancheng"
                                       :value="item.factory_name_jiancheng" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数量：">
                        <span style="display:inline-block;width:180px;font-weight: bold">{{editDetailCount | countRowTotal}}</span>
                    </el-form-item>
                    <el-form-item label="总价：">
                        <span style="display:inline-block;width:180px;font-weight: bold">{{editDetailCount | amountRowTotal}}</span>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input type="textarea" :autosize="{minRows:2,maxRows:4}" v-model="editForm.comment" style="width: 480px;" :disabled="!isEdit" placeholder="备注"></el-input>
                    </el-form-item>
                </el-form>
                <div style="margin-bottom: 10px;padding-left: 10px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">数量配比</span>
                </div>
                <el-button type="primary" class="el-icon-search" size="small" plain style="margin: 5px 0 5px 5px"
                           :disabled="!isEdit" @click="openExportBtn">&nbsp;选择订单</el-button>
                <el-table v-if="editItem.length>0" :data="editItem" style="width: 100%" v-loading="loading"
                          class="detail-table-box" size="mini" :header-cell-style="headerCellStyle">
                    <el-table-column prop="export_order_number" label="运营订单编码" width="100" fixed></el-table-column>
                    <el-table-column prop="order_number" label="订单/批次" width="80" fixed></el-table-column>
                    <el-table-column prop="customer_purchase_order_date" label="客人下单日期" width="100" fixed>
                        <template slot-scope="{row}">
                            {{editItemDetail.customer_purchase_order_date}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="f25" label="是否需要封样" width="100" fixed>
                        <template slot-scope="{row}">
                            <el-checkbox v-model="row.f25" true-value=1 false-value=0 :disabled="!isEdit"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_number" label="款号" width="90" fixed></el-table-column>
                    <el-table-column prop="product" label="款名" width="120" show-overflow-tooltip fixed></el-table-column>
<!--                    <el-table-column prop="product_category" label="品类" width="80" show-overflow-tooltip fixed></el-table-column>-->
<!--                    <el-table-column prop="product_detail_category" label="设计分类" width="80" show-overflow-tooltip fixed></el-table-column>-->
                    <el-table-column label="款式颜色" width="90" show-overflow-tooltip fixed>
                        <template slot-scope="{row}">
                            <span style="display:inline-block;width:16px;height:16px;vertical-align: text-bottom;"
                                :style="{'background-color': getColor(editItemColour.colour_value)}"></span>
                            {{editItemColour.colour}}
                        </template>
                    </el-table-column>
                    <el-table-column v-for="(item, index) in sizeList" :key="index" :label="item.size" min-width="90">
                        <template scope="{ row }">
                            <el-input v-if="editDetailCount[item.size] && isEdit" class="size-count-item" :readonly="!isEdit" :min="0" placeholder="0"
                                      v-model.trim="editDetailCount[item.size].count" size="mini" type="number" @input="countInput($event, item.size)"></el-input>
                            <span v-else>{{editDetailCount[item.size] ? (editCount[item.size].count ? editDetailCount[item.size].count : 0) : "-"}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="汇总" width="70" fixed="right">
                        <template scope="{ row }">{{editDetailCount | countRowTotal}}</template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button @click="closeBtn">退 出</el-button>
                <el-button type="primary" v-if="isEdit" @click="saveBtn" :loading="saveLoading" :disabled="editItem.length==0">
                    {{ saveLoading ? '提交中 ...' : '保 存' }}
                </el-button>
            </div>
        </el-drawer>

        <!--选择大货核价-->
        <el-dialog title="查看核价单价格" :visible.sync="verifyVisible" top="10px" :close-on-click-modal="false" width="900px">
            <el-row>
                <el-form inline>
                    <el-form-item>
                        <el-input v-model.trim="verifyForm.number" size="small" style="width:140px;" placeholder="核价编码" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model.trim="verifyForm.type_no" size="small" style="width:140px;" placeholder="款号" clearable
                            :disabled="editItem.length>0"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="verifyForm.t73_id" placeholder="核价类型" style="width: 100px;" size="small" disabled>
                            <el-option label="大货核价" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="verifyForm.state" placeholder="状态" style="width: 100px;" size="small" disabled>
                            <el-option label="锁定" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" @click="searchVerifyBtn" size="small" :loading="btnLoading">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="verifyData" style="width: 100%" class="verify-table-box" max-height="400px" v-loading="btnLoading" size="mini" highlight-current-row
                          @current-change="verifySelected">
                    <el-table-column prop="number" label="核价单编码"></el-table-column>
                    <el-table-column prop="style_number" label="款号"></el-table-column>
                    <el-table-column prop="style" label="款名" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="colour" label="款式颜色"></el-table-column>
                    <el-table-column prop="colour" label="核价用途">
                        <template slot-scope="{row}">
                            <el-tag size="mini" v-if="row.t73_id==1" type="primary">大货核价</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="creation_time" label="创建时间"></el-table-column>
                    <el-table-column prop="state" label="状态">
                        <template slot-scope="{row}">
                            <el-tag size="mini" v-if="row.state==1" type="warning">锁定</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="f65" label="加工价">
                        <template slot-scope="{row}">
                            {{ Number(row.f65).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="f63" label="绣花价">
                        <template slot-scope="{row}">
                            {{ Number(row.f63).toFixed(2)}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div slot="footer">
                <el-button @click="verifyVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveVerifyBtn" size="small" :loading="saveLoading" :disabled="selectedVerifyData.length==0">确 定</el-button>
            </div>
        </el-dialog>

        <!--选择运营订单-->
        <el-dialog title="选择运营订单" :visible.sync="exportVisible" top="10px" :close-on-click-modal="false" width="900px">
            <el-row>
                <el-form inline>
                    <el-form-item>
                        <el-input v-model.trim="exportForm.number" :disabled="editItem.length>0" size="small" style="width:140px;"
                                  placeholder="运营订单编码" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model.trim="exportForm.type_no" size="small" style="width:140px;" placeholder="款号" clearable
                                  :disabled="editItem.length>0"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model.trim="exportForm.type_name" size="small" style="width:140px;" placeholder="款名" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="exportForm.state" placeholder="状态" style="width: 100px;" size="small" disabled>
                            <el-option label="锁定" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" @click="searchExportBtn" size="small" :loading="btnLoading">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="exportData" style="width: 100%" max-height="400px" v-loading="btnLoading" size="mini" @selection-change="exportSelected">
                    <el-table-column type="selection" align="center" width="50"></el-table-column>
                    <el-table-column prop="export_order_number" label="运营订单编码" width="100"></el-table-column>
                    <el-table-column prop="creator" label="创建人" width="80"></el-table-column>
                    <el-table-column prop="customer_purchase_order_date" label="下单日期" width="85"></el-table-column>
                    <el-table-column prop="product_number" label="款号" width="100">
                        <template slot-scope="{row}">
                            {{row.order_product.product_number}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="product" label="款名" show-overflow-tooltip>
                        <template slot-scope="{row}">
                            {{row.order_product.product}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="colour" label="款式颜色" width="90">
                        <template slot-scope="{row}">
                            <span style="display:inline-block;width:16px;height:16px;vertical-align: text-bottom;"
                                  :style="{'background-color': getColor(row.order_colour.colour_value)}"></span>
                            {{row.order_colour.colour}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="尺码" width="70">
                        <template slot-scope="{row}">
                            {{row.order_size.size}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="数量" width="80"></el-table-column>
                    <el-table-column prop="f8_short" label="绣花厂" width="80">
                        <template slot-scope="{row}">
                            {{row.style.f8_short}}
                        </template>
                    </el-table-column>
<!--                    <el-table-column prop="f9_short" label="印花厂" width="80"></el-table-column>-->
<!--                    <el-table-column prop="f10_short" label="烫金厂" width="80"></el-table-column>-->
<!--                    <el-table-column prop="f11_short" label="印金厂" width="80"></el-table-column>-->
                </el-table>
            </el-row>
            <div slot="footer">
                <el-button @click="exportVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveExportBtn" size="small" :loading="saveLoading" :disabled="selectedExportData.length==0">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {factoryList} from "../../api/produce/factory";
import {
    processingManageCheck,
    processingManageDel,
    processingManageDetail,
    processingManageList, processingManageSave
} from "../../api/produce/processing";
import {userList} from "../../api/user";
import {copyText, formatDate, getColor, sizeSort} from "../../libs/tools";
import {verifyPriceList} from "../../api/soa/verifyPrice";
import {exportSearch} from "../../api/om/export";

export default {
    name: "produce_processingManage",
    data() {
        return {
            getColor,
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            searchLoading: false,
            factoryList: [],
            form: {
                number: "",
                export_order_number: "",
                type_no: "", supplier: "",
                type_name: "",
                approval_state: "",
                delivery_date: "",
                creator: "",
                status: "",
                verify_price_number: ""
            },

            userList:[],
            saveLoading: false,
            editTitle: "",
            editVisible: false,
            editForm:{},
            sizeList: [],
            editItem: [],
            editItemColour: {},
            editItemDetail: {},
            editItemDetailBatch: {},
            editCount: {},
            editDetailCount: {},
            isEdit: 0,

            verifyVisible: false,
            verifyForm: {number: '', type_no: '', state: 1, t73_id: 1},
            verifyData: [],
            selectedVerifyData: [],

            exportVisible: false,
            exportForm: {number: '', type_no: '', type_name: '', state: 1},
            exportData: [],
            selectedExportData: [],
        }
    },
    filters: {
        countRowTotal(list) {
            let total = 0;
            for(let k in list){
                total += Number(list[k].count);
            }
            return total;
        },
        amountRowTotal(list){
            let total = 0;
            for(let k in list){
                total += Number(list[k].count) * Number(list[k].price);
            }
            return total.toFixed(2);
        },
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        searchUserBtn(val){
            if(val == ""){
                return;
            }
            this.searchLoading = true;
            userList({page: 1, limit:20,source_from: 'fs', name: val, status: 1}).then((res) =>{
                this.searchLoading = false;
                this.userList = res.data.data;
            }).catch(() =>{
                this.searchLoading = false;
            })
        },
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 200, factory_name: name, status: 0, tab: "1,2"}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        factoryChangeBtn(val, column){
            this.factoryList.forEach(item => {
                if(column == 'supplier' && item.factory_name == val){
                    this.editForm.supplier_short = item.factory_name_jiancheng;
                    this.editForm.supplier_id = item.id;
                    this.editForm.contract_number = item.supplier_id+(formatDate(new Date().getTime(), "date").replace(/-/g, ""))+this.user.id;
                }
                if(column == 'f8' && item.factory_name_jiancheng == val){
                    this.editForm.f8_id = item.id;
                }
                if(column == 'f9' && item.factory_name_jiancheng == val){
                    this.editForm.f9_id = item.id;
                }
                if(column == 'f10' && item.factory_name_jiancheng == val){
                    this.editForm.f10_id = item.id;
                }
                if(column == 'f11' && item.factory_name_jiancheng == val){
                    this.editForm.f11_id = item.id;
                }
            })
        },
        copyBtn(classTag, content){
            copyText(classTag, content);
            this.$message.success("复制成功: "+content)
        },
        //跳转
        linkTo(val, name){
            switch (name){
                case "pages_designEd":
                    this.$router.push({
                        name: name,
                        params: {id: val, isEdit: 0}
                    });
                    break;
                case "produce_processing":
                    this.$router.push({
                        name: name,
                        params: {processing_code: val}
                    });
                    break;
                case "soa_pricing_verify":
                    this.$router.push({
                        name: name,
                        params: {verify_price_number: val}
                    });
                    break;
            }

        },
        //合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (!values.every((value) => isNaN(value)) && (["件数", "总价"].includes(column.label))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = /\./.test(sums[index]) ? sums[index].toFixed(2) : sums[index];
                } else {
                    sums[index] = "";
                }
            });
            return sums;
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //页数
        pageSizeChange(pageSize){
            this.limit = pageSize;
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                t73_id: 1,
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            this.btnLoading = true;
            processingManageList(param).then((res) => {
                this.loading = false;
                this.btnLoading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
                this.btnLoading = false;
            });
        },
        searchVerifyBtn(){
            let param = {
                page: 1,
                limit: 30
            };
            param = Object.assign(param, this.verifyForm);
            this.btnLoading = true;
            verifyPriceList(param).then((res) => {
                this.btnLoading = false;
                this.verifyData = res.data.data;
            }).catch(() => {
                this.btnLoading = false;
            });
        },
        searchExportBtn(){
            let param = {
                page: 1,
                limit: 10
            };
            param = Object.assign(param, this.exportForm);
            this.btnLoading = true;
            this.exportData = [];
            let sizes = [];
            this.sizeList.forEach(item => {
                sizes.push(item.size);
            });
            exportSearch(param).then((res) => {
                this.btnLoading = false;
                res.data.data.forEach(item => {
                    if(!sizes.includes(item['order_size']['size'])){
                        this.exportData.push(item);
                    }
                });
            }).catch(() => {
                this.btnLoading = false;
            });
        },
        headerCellStyle(row) {
            for(let i in this.sizeList){
                if(this.sizeList[i].size == row.column.label){
                    return {color: "#409EFF"};
                }
            }
        },
        //修改下单数量
        countInput(val, size){
            if(this.editCount[size].count < val){
                this.$message.warning("不能超过最大可填数量："+this.editCount[size].count);
                this.$set(this.editDetailCount[size], 'count', this.editCount[size].count);
                return;
            }
        },
        //打开大货核价弹窗
        openVerifyBtn(){
            this.verifyVisible = true;
            if(this.editItem.length>0){
                this.verifyForm.type_no = this.editItem[0].product_number;
                this.searchVerifyBtn();
            }
        },
        //选择核价单
        verifySelected(val){
            this.selectedVerifyData = [val];
        },
        //保存核价单
        saveVerifyBtn(){
            this.$confirm(`加工采购价格会被修改, 是否确认`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                console.log(this.selectedVerifyData[0]);
                this.editForm.f8_price = Number(this.selectedVerifyData[0].f63).toFixed(2);
                this.editForm.verify_price_price = Number(this.selectedVerifyData[0].f65).toFixed(2);
                this.editForm.verify_price_id = this.selectedVerifyData[0].id;
                this.editForm.verify_price_number = this.selectedVerifyData[0].number;
                this.editForm.verify_price_style_number = this.selectedVerifyData[0].style_number;
                for(let k in this.editDetailCount){
                    this.editDetailCount[k].price = this.selectedVerifyData[0].f65;
                }
                this.verifyVisible = false;
            }).catch(() => {

            });
        },
        //打开运营订单弹窗
        openExportBtn(){
            this.exportVisible = true;
            if(this.editItem.length>0){
                this.exportForm.type_no = this.editItem[0].product_number;
                this.exportForm.number = this.editItem[0].export_order_number;
                this.searchExportBtn();
            }
        },
        //选择运营订单
        exportSelected(val){
            this.selectedExportData = val;
        },
        //保存运营订单
        saveExportBtn(){
            //校验勾选的运营订单的合法性, sku唯一性
            let key = this.editItem.length > 0 ? this.editItem[0].export_order_number+this.editItem[0].product_number+this.editItemColour.colour_number : "";
            let editItem = {}, editCount = {}, editDetailCount = {}, sizeList = [], sizeMap = {};
            if(this.editItem.length > 0){
                editItem[key] = this.editItem[0];
            }
            this.sizeList.forEach(item =>{
                sizeList.push(item.size);
                sizeMap[item.size] = item;
            })
            this.selectedExportData.forEach(item => {
                key = item['export_order_number']+item['order_product']['product_number']+item['order_colour']['colour_number'];
                if(!editItem[key]){
                    delete item['order_product']['id'];
                    editItem[key] = Object.assign(item['order_product'], {
                        export_order_number: item['export_order_number'],
                        f25: false,
                        f26: 0,
                        order_id: item['order_item']['id'],
                        order_number: item['order_item']['customer_purchase_order_number'],
                        order_type: 2
                    });
                    this.editItemColour = {
                        colour: item['order_colour']['colour'],
                        colour_id: item['order_colour']['colour_id'],
                        colour_number: item['order_colour']['colour_number'],
                        colour_value: item['order_colour']['colour_value']
                    };
                    this.editItemDetail = {
                        comment: item['order_item']['comment'],
                        country: item['order_item']['country'],
                        country_id: item['order_item']['country_id'],
                        customer_purchase_order_date: item['order_item']['customer_purchase_order_date'],
                        customer_purchase_order_number: item['order_item']['customer_purchase_order_number'],
                        delivery_date: item['order_item']['delivery_date']
                    }
                    delete item['style']['id'];
                    this.editForm = JSON.parse(JSON.stringify(Object.assign(this.editForm, item['style'])));
                }
                //添加尺码数量
                if(!sizeList.includes(item['order_size']['size'])){
                    sizeList.push(item['order_size']['size']);
                    editCount[item['order_size']['size']] = {
                        count: item['count'],
                        item_size: {
                            size: item['order_size']['size'],
                            size_number: item['order_size']['size_number'],
                            size_id: item['order_size']['size_id']
                        },
                        order_count_id: item['id'],
                        order_count_type: 2
                    };
                    editDetailCount[item['order_size']['size']] = {
                        count: item['count'],
                        price: this.editForm.verify_price_price ? this.editForm.verify_price_price : 0,
                        item_size: {
                            size: item['order_size']['size'],
                            size_number: item['order_size']['size_number'],
                            size_id: item['order_size']['size_id']
                        },
                        order_count_id: item['id'],
                        order_count_type: 2
                    }
                }
            });
            editItem = Object.values(editItem);
            if(editItem.length > 1){
                this.$message.warning("添加失败：不可选择多商品");return;
            }
            //新增尺码序列
            sizeList = sizeSort(sizeList);
            let position = 0;
            this.sizeList = [];
            sizeList.forEach(size => {
                position += 1;
                let obj = sizeMap[size] ? sizeMap[size] : {position: position, size:size};
                obj.position = position;
                this.sizeList.push(obj);
            });
            if(this.editItem.length == 0){
                this.editItem.push(JSON.parse(JSON.stringify(editItem[0])));
            }
            this.editCount = Object.assign(this.editCount, editCount);
            for(let size in editDetailCount){
                this.$set(this.editDetailCount, size, editDetailCount[size]);
            }
            this.exportVisible = false;
        },
        closeBtn(){
            this.isEdit = 0;
            this.editVisible = false;
            this.editForm = {};
            this.sizeList = [];
            this.editItem = [];
            this.editItemColour = {};
            this.editItemDetail = {};
            this.editItemDetailBatch = {};
            this.editCount = {};
            this.editDetailCount = {};
        },
        addBtn(){
            this.editVisible = true;
            this.editTitle = "加工单管理：新增";
            this.editForm = {};
            this.editCount = {};
            this.editDetailCount = {};
            this.editItem = [];
            this.editItemColour = {};
            this.editItemDetail = {};
            this.editItemDetailBatch = {};
            this.sizeList = [];
            this.isEdit = 1;
        },
        //打开加工单编辑弹窗
        openBtn(row){
            this.loading = true;
            processingManageDetail({id: row.id}).then((res) =>{
                this.editTitle = this.nodeActions.includes("edit") && [0, 2].includes(row.approval_state) ? "加工单管理：编辑" : "加工单管理：查看";
                this.isEdit = this.nodeActions.includes("edit") && [0, 2].includes(row.approval_state) ? 1 : 0;
                this.loading = false;
                this.editForm = res.data.data;
                this.editCount = res.data.count;
                this.editDetailCount = res.data.detail_count;
                this.editItem = [res.data.item];
                this.editItemColour = res.data.item_colour;
                this.editItemDetail = res.data.item_detail;
                this.editItemDetailBatch = res.data.item_detail_batch;
                this.sizeList = res.data.size_position;
                this.editVisible = true;
            }).catch(()=>{
                this.loading = false;
            });
        },
        //更多操作
        actionBtn(command, row){
            switch (command){
                case "CHECK":
                case "UNCHECK":
                    if(!row.verify_price_number){
                        this.$message.warning("操作失败：缺少大货核价");return;
                    }
                    this.loading = true;
                    processingManageCheck({id: row.id, action: command}).then((res) =>{
                        this.loading = false;
                        if(res.code === 0){
                            this.$message.success(command == "CHECK" ? "已审核" : "已取消审核");
                            this.getData();
                        }else{
                            this.$message.error(res.msg);
                        }
                    }).catch(() =>{
                        this.loading = false;
                    })
                    break;
                case "DEL":
                    this.$confirm(`删除加工单【${row.number}】, 是否确认`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        processingManageDel({id: row.id}).then((res) =>{
                            this.loading = false;
                            if(res.code === 0){
                                this.$message.success("删除成功");
                                this.getData();
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch(() =>{
                            this.loading = false;
                        })
                    }).catch(() =>{

                    })
                    break;
            }
        },
        saveBtn(){
            let count = 0, price = 0;
            for(let size in this.editDetailCount){
                count += Number(this.editDetailCount[size]['count']);
                price += Number(this.editDetailCount[size]['count']) * Number(this.editDetailCount[size]['price']);
            }
            this.editForm.count = count;
            this.editForm.price = price.toFixed(2);
            if(count <= 0){
                this.$message.warning("保存异常：下单数汇总：0");return;
            }
            if(!this.editForm.contract_number || !this.editForm.supplier || !this.editForm.delivery_date || !this.editForm.f18){
                this.$message.warning("保存异常：表头必填内容不能为空");return;
            }
            if(!/[0-9]+/.test(this.editForm.contract_number)){
                this.$message.warning("保存异常：合同号书写错误, 期望数字");return;
            }
            if(!this.editForm.f8_short && parseFloat(this.editForm.f8_price) > 0){
                this.$message.warning("保存异常：绣花厂未填写");return;
            }
            this.saveLoading = true;
            let obj = {
                edit_form: JSON.stringify(this.editForm),
                edit_count: JSON.stringify(this.editCount),
                edit_detail_count: JSON.stringify(this.editDetailCount),
                edit_item: JSON.stringify(this.editItem),
                edit_item_colour: JSON.stringify(this.editItemColour),
                edit_item_detail: JSON.stringify(this.editItemDetail),
                edit_item_detail_batch: JSON.stringify(this.editItemDetailBatch),
                size_list: JSON.stringify(this.sizeList)
            };
            processingManageSave(obj).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("保存成功");
                    this.getData();
                    this.closeBtn();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() => {
                this.saveLoading = false;
            })
        },
    },
    mounted() {
        this.searchBtn();
        this.getFactoryData("");
    }
}
</script>

<style scoped>
/* 解决有合计行时，横向滚动条在左侧、右侧固定列中无法选中问题*/
/deep/ .el-table__fixed, /deep/ .el-table__fixed-right{
    pointer-events: none;
}
/deep/ .el-table__fixed >*, /deep/ .el-table__fixed-right >*{
    pointer-events: all;
}

 .more-btn /deep/ .el-badge__content.is-fixed.is-dot{
     top: 5px;
 }

.edit-item-form /deep/ .el-form-item__label{
    color: #409eff;
}

.detail-table-box /deep/ .size-count-item .el-input__inner {
    padding: 0 !important;
}
.detail-table-box /deep/ .el-input__inner {
    border: none !important;
}

.verify-table-box /deep/ .el-table__body tr.current-row>td{
    background-color: #ff635840;
}

.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
/*弹窗图片，遮罩层 层级bug*/
/deep/ .el-table__fixed-body-wrapper{
    z-index: unset;
}
</style>
